import React, { useCallback, useState } from 'react'
import { Stage, Sprite, useApp, Graphics, Container } from '@inlet/react-pixi'
import SpinnerCountDown from './components/SpinnerCountDown'
import * as PIXI from 'pixi.js'
const DPR = window.devicePixelRatio

function Dice() {
    const [op, setOp] = useState({
        position: [375/2-65, 100],
        innerColor: 0x363D6F,
        outerStartColor: 0x329FEF,
        outerEndColor: 0x7CFAE5,
        innerRadius: 58,
        outerRadius: 65,
        maxTime: 15,
        nowTime: 9,
        tips: 'Shaking',
        showLoading: false,
        loadingText: 'Loading...',
    })
    return (
        <>
            <button
                style={{
                    position: 'absolute',
                    left: '50%',
                    top: '300px',
                    transform: 'translateX(-50%)',
                    padding: '4px 8px',
                    color: 'green'
                }}
                onClick={() => setOp(v => ({...v, showLoading: !v.showLoading }))}
            >toggle</button>
            <Stage
                width={375}
                height={500}
                options={{
                    autoDensity: true,
                    antialias: true,
                    resolution: DPR,
                    backgroundColor: 0x191c35
                }}
            >
                <Container>
                    <SpinnerCountDown
                        {...op}
                    />
                </Container>
            </Stage>
        </>
    )
}

export default Dice
